
import * as PIXI from 'pixi.js';
import stickSrc from 'common/asset/img/game/stick.png';
import sliderSrc from 'common/asset/img/game/slider.png';
import sliderBtnSrc from 'common/asset/img/game/sliderBtn.png';
import Rect from 'components/rect';
import Text from 'components/text';
import Image from 'components/image';
const { Container } = PIXI;

export default class StickModal {
  constructor({parent, onGetItem, ...props}) {

    const {height, box, top, width} = props;

    this.onGetItem = onGetItem;

    this.parent = parent;

    this.container = new Container();

    this._renderStick();
    this._renderSlider(box);


    let text = new Text({
      value: '嬷女的神器,可大可小,滑动试试看',
      left: 465,
      top: 580,
    });

    text.x = (width - text.width) / 2;

    this.container.addChild(text);

    this.container.y = top;
    this.container.x = (window.CFG.view.width - width) / 2;
    // this.container.width = width;
    // this.container.height = height;

  }

  _renderStick = (scale = 1) => {
    if (this.stick) this.container.removeChild(this.stick);

    this.stick = new Image({
      src: stickSrc,
      width: 30,
      height: 467,
      // left: 300,
      // top: 80,
    });
    this.stick.scale.x *= scale;
    this.stick.scale.y *= scale;
    this.stick.y = (467 - this.stick.height) / 2 + 80;
    this.stick.x = (30 - this.stick.width) / 2 + 300;


    this.container.addChild(this.stick);
  };

  _renderSlider = (box, move = 0) => {
    if (this.sliderBtn) this.container.removeChild(this.sliderBtn);

    const slider = new Rect({
      width: 30,
      height: 467,
      left: 500,
      top: 80,
      fill: 0x103552,
    });

    this.sliderBtn = new Image({
      src: sliderBtnSrc,
      width: 100,
      height: 100,
      left: 465,
      top: 80 + 467 / 2 - 50 + move,
    });

    this.sliderBtn.interactive = true;
    this.sliderBtn
      .on('pointerdown', this.onDragStart)
      .on('pointerup', this.onDragEnd)
      .on('pointerupoutside', this.onDragEnd)
      .on('pointermove', (e) => {
        this.onDragMove(e, box);
      });


    this.container.addChild(slider);
    this.container.addChild(this.sliderBtn);
  };

  onDragStart = (event) => {

    if (this.startY === undefined) this.startY = event.data.getLocalPosition(this.container.parent).y;
    this.dragging = true;
  };

  onDragEnd = () => {
    this.dragging = false;
  };

  onDragMove = (event, box) => {
    if (this.dragging) {
      const newY = event.data.getLocalPosition(this.container.parent).y;
      let move = newY - this.startY;


      if (move <= - (467 - 100) / 2) move = - (467 - 100) / 2;
      if (move >= (467 - 100) / 2) move = (467 - 100) / 2;

      const scale = 1 + 0.05 * move / 40;
      this._renderSlider(box, move);
      this._renderStick(scale);
      if (move < 0) {
        this.hasGet = true;
        this.onGetItem();
        box.parent.getItem(box.getItems);
        const getItem = box.parent.items.filter(item => item.key === 'needle')[0];
        this.parent.container.removeChild(this.container);
        this.parent._renderContent(getItem);
      } else {
        this.lastMove = move;
      }
    }


  };
}
